<template>
    <div class="index-list">
        <div class="fixed-title" ref="fixedWrapper" v-show="fixTitle.length">
            <h2 class="title">{{fixTitle}}</h2>
        </div>
        <Scroll @scroll="scroll" :probeType="3" ref="scrollRef">
            <div class="singer-group" ref="wrapper">
                <ul class="group" v-for="singer in singers" :key="singer.title">
                    <li class="group-item">
                        <h2 class="title">{{singer.title}}</h2>
                        <ul class="singer-list">
                            <li class="singer-item"  v-for="one in singer.list" :key="one.id" @click="selectSinger(one)">
                                <img class="avatar" v-lazy="one.pic" alt="">
                                <div class="name">{{one.name}}</div>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </Scroll>

        <ul class="shortcart-ul"
            @touchstart.stop.prevent="touchStart"
            @touchmove.stop.prevent="touchMove"
            @touchend.stop.prevent
        >
            <li
                class="shortcart-li"
                v-for="(title, index) in titles"
                :key="title"
                :data-index="index"
                :class="{ active: currentIndex === index || (currentIndex === -1 && index === 0) }"
            >{{title}}</li>
        </ul>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType } from 'vue'
import { SingerItem } from '@/views/singer/index.vue'
import { SongProp } from '@/store/type'
import Scroll from '@/components/base/scroll/index.vue'
import useIndexListHooks from './useIndexListHooks'
import useShortcarHooks from './use-shortcar-hooks'

export default defineComponent({
    props: {
        singers: {
            type: Array as PropType<SingerItem[]>,
            default: () => []
        }
    },
    components: {
        Scroll
    },
    emits: ['selectSingerFn'],
    setup (props, { emit }) {
        const { wrapper, currentIndex, scroll, fixTitle, fixedWrapper } = useIndexListHooks(props)
        const { titles, touchStart, touchMove, scrollRef } = useShortcarHooks(props, wrapper)
        const selectSinger = (one: SongProp) => {
            emit('selectSingerFn', one) // 派发事件
        }
        return {
            // useIndexListHooks
            wrapper,
            currentIndex,
            scroll,
            fixTitle,
            fixedWrapper,
            // useShortcarHooks
            titles,
            touchStart,
            touchMove,
            scrollRef,
            selectSinger
        }
    }
})
</script>

<style lang="scss">
.index-list {
    height: 100%;
    overflow: hidden;
    position: relative;
}
.fixed-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(0px) translateZ(2px);
    z-index: 1;
    .title {
        height: 30px;
        line-height: 30px;
        padding-left: 20px;
        font-size: 12px;
        color: $color-text-d;
        background: #333;
    }
}
.singer-group {
    .group {
        .group-item {
            padding-bottom: 30px;
            .title {
                height: 30px;
                line-height: 30px;
                padding-left: 20px;
                font-size: 12px;
                color: $color-text-d;
                background: #333;
            }
            .singer-list {
                .singer-item {
                    padding: 20px 0 0 30px;
                    display: flex;
                    align-items: center;
                    .avatar {
                        width: 50px;
                        height: 50px;
                        border-radius: 50%;
                        overflow: hidden;
                    }
                    .name {
                        margin-left: 15px;
                        color:  $color-text-d;
                    }
                }
            }
        }
    }
}
.shortcart-ul {
    position: absolute;
    right: 0;
    top: 50%;
    background: rgba(0,0,0,.3);
    transform: translateY(-50%) translateZ(5px);
    z-index: 9;
    .shortcart-li {
        width: 20px;
        height: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: hsla(0,0%,100%,.5);
        font-size: 12px;
        &.active {
            color: #ffcd32;
        }
    }
}
</style>
